<template>
  <div class="personnel-management">
    <!-- 搜索筛选区域 -->
    <div class="search-filters">
      <div class="filter-row">
        <!-- 协议编码搜索 -->
        <div>
          <span class="search-item">协议编码</span>
          <input
              v-model="searchForm.contractNo"
              type="text"
              placeholder="请输入协议编码"
              class="input-field"
          />
        </div>

        <!-- 缴费人姓名搜索 -->
        <div>
          <span class="search-item">缴费人</span>
          <input
              v-model="searchForm.payerName"
              type="text"
              placeholder="请输入缴费人"
              class="input-field"
          />
        </div>

        <!-- 缴费类型搜索 -->
        <div>
          <span class="search-item">缴费类型</span>
          <select v-model="searchForm.paymentType" class="select-field">
            <option value="">请选择缴费类型</option>
            <option value="物业费">物业费</option>
            <option value="水电费">水电费</option>
            <option value="租金">租金</option>
            <option value="维修费">维修费</option>
          </select>
        </div>

        <!-- 审核状态搜索 -->
        <div>
          <span class="search-item">审核状态</span>
          <select v-model="searchForm.auditStatus" class="select-field">
            <option value="">请选择审核状态</option>
            <option value="待审核">待审核</option>
            <option value="审核通过">审核通过</option>
            <option value="审核拒绝">审核拒绝</option>
          </select>
        </div>

        <button @click="handleSearch" class="btn-primary">
          <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPnga03cd43e27317f20428660e14317e35a64a3d907d88f824770f063b2f9fd5f10" alt="搜索" class="btn-icon" />
          搜索
        </button>
        <button @click="handleReset" class="btn-secondary">
          <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPngd1ee69767e02bb56b7c745624d059b292108792e966600668227ff5d22467bbe" alt="重置" class="btn-icon" />
          重置
        </button>
      </div>
    </div>

    <!-- 分割线 -->
    <div class="divider"></div>

    <!-- 数据表格 -->
    <div class="table-container">
      <table class="data-table">
        <thead>
        <tr class="table-header">
          <th>序号</th>
          <th>协议编码</th>
          <th>缴费人</th>
          <th>缴费类型</th>
          <th>缴费金额</th>
          <th>缴费方式</th>
          <th>缴费日期</th>
          <th>审核状态</th>
          <th>缴费类型</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(record, index) in paginatedRecords" :key="record.id" class="table-row">
          <td>{{ (pagination.currentPage - 1) * pagination.pageSize + index + 1 }}</td>
          <td>{{ record.contractNo }}</td>
          <td>{{ record.payerName }}</td>
          <td>{{ record.paymentType }}</td>
          <td>{{ record.actualAmount || record.amount }}</td>
          <td>{{ record.paymentMethod }}</td>
          <td>{{ record.paymentDate }}</td>
          <td>
            <span :class="['status-badge',
              record.auditStatus === '审核通过' ? 'status-active' :
              record.auditStatus === '审核拒绝' ? 'status-rejected' : 'status-pending']">
              {{ record.auditStatus }}
            </span>
          </td>
          <td>{{ record.remark }}</td>
          <td class="action-buttons">
            <button @click="handleView(record)" class="action-btn" title="查看详情">
              <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng7e588fa8b8650f5efd6ef1233ed984dd6881ff2d70f829a9cd26b4482d233394" alt="查看" />
            </button>
            <button v-if="record.auditStatus === '待审核'" @click="handleAudit(record)" class="action-btn" title="审核">
              <img src="https://lanhu-oss-proxy.lanhuapp.com/SketchPng8dd30a7302a6f2ab4df9f28606f440873a476132867bc3718014adf8e7a187da" alt="审核" />
            </button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination">
      <span class="pagination-info">共 {{ pagination.totalPages }} 页</span>
      <button @click="goToPrevPage" :disabled="pagination.currentPage === 1" class="pagination-btn">上一页</button>
      <button
          v-for="page in visiblePages"
          :key="page"
          @click="goToPage(page)"
          :class="['pagination-btn', { 'active': page === pagination.currentPage }]"
      >
        {{ page }}
      </button>
      <button @click="goToNextPage" :disabled="pagination.currentPage === pagination.totalPages" class="pagination-btn">下一页</button>
      <span class="pagination-goto">前往</span>
      <input v-model.number="gotoPage" @keyup.enter="handleGotoPage" class="goto-input" />
      <span>页</span>
    </div>

    <!-- 查看详情弹窗 -->
    <div v-if="showModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ modalTitle }}</h3>
          <button @click="closeModal" class="close-btn">×</button>
        </div>
        <div class="modal-body">
          <div class="form-grid">
            <div class="form-item">
              <label>协议编码</label>
              <input v-model="currentRecord.contractNo" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>缴费人</label>
              <input v-model="currentRecord.payerName" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>缴费类型</label>
              <input v-model="currentRecord.paymentType" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>缴费金额</label>
              <input :value="currentRecord.actualAmount || currentRecord.amount" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>缴费方式</label>
              <input v-model="currentRecord.paymentMethod" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>缴费日期</label>
              <input v-model="currentRecord.paymentDate" disabled class="form-input" />
            </div>
            <div class="form-item">
              <label>审核状态</label>
              <input v-model="currentRecord.auditStatus" disabled class="form-input" />
            </div>
            <div class="form-item full-width">
              <label>缴费类型</label>
              <textarea v-model="currentRecord.remark" disabled class="form-textarea"></textarea>
            </div>
            <div class="form-item full-width" v-if="currentRecord.voucher">
              <label>缴费凭证</label>
              <div class="voucher-preview">
                <img :src="currentRecord.voucher" alt="缴费凭证" class="preview-image" />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="closeModal" class="btn-cancel">关闭</button>
        </div>
      </div>
    </div>

    <!-- 审核弹窗 -->
    <div v-if="showAuditModal" class="modal-overlay" @click="closeAuditModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>缴费审核</h3>
          <button @click="closeAuditModal" class="close-btn">×</button>
        </div>
        <div class="modal-body">
          <div class="audit-info">
            <h4>缴费信息</h4>
            <div class="info-row">
              <span class="info-label">协议编码:</span>
              <span>{{ auditRecord.contractNo }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">缴费人:</span>
              <span>{{ auditRecord.payerName }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">缴费类型:</span>
              <span>{{ auditRecord.paymentType }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">缴费金额:</span>
              <span>{{ auditRecord.actualAmount || auditRecord.amount }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">缴费方式:</span>
              <span>{{ auditRecord.paymentMethod }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">缴费日期:</span>
              <span>{{ auditRecord.paymentDate }}</span>
            </div>
          </div>

          <div class="voucher-section" v-if="auditRecord.voucher">
            <h4>缴费凭证</h4>
            <div class="voucher-preview">
              <img :src="auditRecord.voucher" alt="缴费凭证" class="preview-image" />
            </div>
          </div>

          <div class="audit-form">
            <div class="form-item full-width">
              <label>审核结果</label>
              <div class="radio-group">
                <label class="radio-option">
                  <input type="radio" v-model="auditResult" value="审核通过" />
                  <span class="radio-label">通过</span>
                </label>
                <label class="radio-option">
                  <input type="radio" v-model="auditResult" value="审核拒绝" />
                  <span class="radio-label">拒绝</span>
                </label>
              </div>
            </div>

            <div class="form-item full-width" v-if="auditResult === '审核拒绝'">
              <label>拒绝原因</label>
              <textarea v-model="rejectReason" placeholder="请输入拒绝原因" class="form-textarea"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="closeAuditModal" class="btn-cancel">取消</button>
          <button @click="submitAudit" class="btn-save">提交审核</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const searchForm = ref({
  contractNo: '',
  payerName: '',
  paymentType: '',
  auditStatus: ''
})

const records = ref([
  {
    id: 1,
    contractNo: 'HT20230101001',
    payerName: '张三',
    amount: '1200.00',
    actualAmount: '1200.00',
    paymentType: '物业费',
    paymentDate: '2023-10-01',
    auditStatus: '待审核',
    paymentMethod: '银行转账',
    createTime: '2023-09-01',
    remark: '按季度缴纳物业费',
    voucher: 'https://via.placeholder.com/150'
  },
  {
    id: 2,
    contractNo: 'HT20230201002',
    payerName: '李四',
    amount: '800.00',
    actualAmount: '800.00',
    paymentType: '水电费',
    paymentDate: '2023-10-05',
    auditStatus: '审核通过',
    paymentMethod: '微信支付',
    createTime: '2023-09-05',
    remark: '9月份水电费',
    voucher: 'https://via.placeholder.com/150'
  },
  {
    id: 3,
    contractNo: 'HT20230301003',
    payerName: '王五',
    amount: '3000.00',
    actualAmount: '3000.00',
    paymentType: '租金',
    paymentDate: '2023-10-10',
    auditStatus: '待审核',
    paymentMethod: '支付宝',
    createTime: '2023-09-10',
    remark: '10月份租金',
    voucher: 'https://via.placeholder.com/150'
  },
  {
    id: 4,
    contractNo: 'HT20230401004',
    payerName: '赵六',
    amount: '1500.00',
    actualAmount: '1500.00',
    paymentType: '物业费',
    paymentDate: '2023-10-15',
    auditStatus: '待审核',
    paymentMethod: '银行转账',
    createTime: '2023-09-15',
    remark: '按季度缴纳物业费',
    voucher: 'https://via.placeholder.com/150'
  },
  {
    id: 5,
    contractNo: 'HT20230501005',
    payerName: '钱七',
    amount: '950.00',
    actualAmount: '950.00',
    paymentType: '水电费',
    paymentDate: '2023-10-20',
    auditStatus: '审核通过',
    paymentMethod: '微信支付',
    createTime: '2023-09-20',
    remark: '9月份水电费',
    voucher: 'https://via.placeholder.com/150'
  }
])

const filteredRecords = ref([...records.value])

const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  totalPages: 1,
  total: 0
})

const showModal = ref(false)
const showAuditModal = ref(false)
const modalType = ref('view')
const currentRecord = ref({})
const auditRecord = ref({})
const auditResult = ref('审核通过')
const rejectReason = ref('')
const gotoPage = ref('')

// 计算属性
const modalTitle = computed(() => {
  return '查看缴费记录详情'
})

const paginatedRecords = computed(() => {
  const start = (pagination.value.currentPage - 1) * pagination.value.pageSize
  const end = start + pagination.value.pageSize
  return filteredRecords.value.slice(start, end)
})

const visiblePages = computed(() => {
  const current = pagination.value.currentPage
  const total = pagination.value.totalPages
  const pages = []

  for (let i = Math.max(1, current - 2); i <= Math.min(total, current + 2); i++) {
    pages.push(i)
  }

  return pages
})

// 方法
const updatePagination = () => {
  pagination.value.total = filteredRecords.value.length
  pagination.value.totalPages = Math.ceil(filteredRecords.value.length / pagination.value.pageSize)
  if (pagination.value.currentPage > pagination.value.totalPages) {
    pagination.value.currentPage = 1
  }
}

const handleSearch = () => {
  filteredRecords.value = records.value.filter(record => {
    return (
        // 协议编码模糊匹配
        (!searchForm.value.contractNo || record.contractNo.includes(searchForm.value.contractNo)) &&

        // 缴费人姓名模糊匹配
        (!searchForm.value.payerName || record.payerName.includes(searchForm.value.payerName)) &&

        // 缴费类型精确匹配
        (searchForm.value.paymentType === '' || record.paymentType === searchForm.value.paymentType) &&

        // 审核状态精确匹配
        (searchForm.value.auditStatus === '' || record.auditStatus === searchForm.value.auditStatus)
    )
  })
  pagination.value.currentPage = 1
  updatePagination()
}

const handleReset = () => {
  searchForm.value = {
    contractNo: '',
    payerName: '',
    paymentType: '',
    auditStatus: ''
  }
  filteredRecords.value = [...records.value]
  pagination.value.currentPage = 1
  updatePagination()
}

const handleView = (record) => {
  modalType.value = 'view'
  currentRecord.value = { ...record }
  showModal.value = true
}

const handleAudit = (record) => {
  auditRecord.value = { ...record }
  auditResult.value = '审核通过'
  rejectReason.value = ''
  showAuditModal.value = true
}

const submitAudit = () => {
  // 更新记录状态
  const index = records.value.findIndex(record => record.id === auditRecord.value.id)
  if (index !== -1) {
    records.value[index] = {
      ...records.value[index],
      auditStatus: auditResult.value,
      remark: auditResult.value === '审核拒绝' ? rejectReason.value : records.value[index].remark
    }
  }

  const filteredIndex = filteredRecords.value.findIndex(record => record.id === auditRecord.value.id)
  if (filteredIndex !== -1) {
    filteredRecords.value[filteredIndex] = {
      ...filteredRecords.value[filteredIndex],
      auditStatus: auditResult.value,
      remark: auditResult.value === '审核拒绝' ? rejectReason.value : filteredRecords.value[filteredIndex].remark
    }
  }

  closeAuditModal()
}

const closeAuditModal = () => {
  showAuditModal.value = false
  auditRecord.value = {}
  auditResult.value = '审核通过'
  rejectReason.value = ''
}

const closeModal = () => {
  showModal.value = false
  currentRecord.value = {}
}

const goToPage = (page) => {
  pagination.value.currentPage = page
}

const goToPrevPage = () => {
  if (pagination.value.currentPage > 1) {
    pagination.value.currentPage--
  }
}

const goToNextPage = () => {
  if (pagination.value.currentPage < pagination.value.totalPages) {
    pagination.value.currentPage++
  }
}

const handleGotoPage = () => {
  const page = parseInt(gotoPage.value)
  if (page >= 1 && page <= pagination.value.totalPages) {
    pagination.value.currentPage = page
    gotoPage.value = ''
  }
}

// 生命周期
onMounted(() => {
  updatePagination()
})
</script>

<style scoped>
/* 基础布局样式 */
.personnel-management {
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
  padding: 30px 30px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 0 15px 15px 15px;
}

/* 页面标题 */
.page-title {
  color: rgba(231, 59, 69, 1);
  font-size: 18px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  margin: 0 0 20px 0;
  line-height: 25px;
}

/* 搜索筛选区域 */
.search-filters {
  margin-bottom: 6px;
}

.search-item {
  display: block;
  margin-bottom: 5px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 1527px;
  height: 32px;
}

/* 统一的输入框和选择框样式 */
.input-field, .select-field {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  height: 32px;
  border: 1px solid rgba(216, 216, 216, 1);
  width: 180px;
  padding: 6px 10px;
  font-size: 14px;
  color: rgba(153, 153, 153, 1);
  box-sizing: border-box;
  line-height: 20px;
}

.input-field:focus, .select-field:focus {
  outline: none;
  border-color: rgba(231, 59, 69, 1);
  color: rgba(0, 0, 0, 1);
}

.input-field::placeholder {
  color: rgba(153, 153, 153, 1);
}

/* 统一的按钮样式 */
.btn-primary {
  background-color: rgba(231, 59, 69, 1);
  border-radius: 4px;
  width: 80px;
  height: 32px;
  border: none;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  margin-left: 20px;
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  width: 80px;
  height: 32px;
  border: 1px solid rgba(151, 151, 151, 1);
  color: rgba(135, 136, 138, 1);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.btn-icon {
  width: 13px;
  height: 13px;
}

/* 分割线 */
.divider {
  width: 1533px;
  height: 1px;
  background-color: rgba(237, 239, 244, 1);
  margin: 50px 0 27px 0;
}

/* 表格样式 */
.table-container {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(237, 239, 244, 1);
  width: 100%;
  height: 610px;
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.table-header {
  background-color: rgba(249, 248, 252, 1);
  height: 60px;
  border-radius: 4px;
  border: 1px solid rgba(237, 239, 244, 1);
}

.table-header th {
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  font-weight: normal;
  text-align: left;
  padding: 13px 10px;
  line-height: 20px;
}

.table-row {
  background-color: rgba(255, 255, 255, 1);
  height: 55px;
  border: 1px solid rgba(237, 239, 244, 1);
}

.table-row td {
  color: rgba(102, 102, 102, 1);
  font-size: 16px;
  font-weight: normal;
  padding: 10px 10px;
  line-height: 20px;
  white-space: nowrap;
}

/* 状态标签样式 */
.status-badge {
  padding: 2px 13px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 17px;
  display: inline-block;
  height: 20px;
  box-sizing: border-box;
}

.status-active {
  background-color: rgb(81, 207, 77);
  color: rgb(253, 252, 252);
}

.status-inactive {
  background-color: rgb(241, 130, 114);
  color: rgb(255, 255, 255);
}

.status-pending {
  background-color: rgb(255, 193, 7);
  color: rgb(255, 255, 255);
}

.status-rejected {
  background-color: rgb(220, 53, 69);
  color: rgb(255, 255, 255);
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 43px;
  align-items: center;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn img {
  width: 13px;
  height: 13px;
}

/* 分页样式 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.pagination-info {
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  line-height: 20px;
}

.pagination-btn {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(216, 216, 216, 1);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  cursor: pointer;
  min-width: 32px;
  height: 32px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
  background-color: rgba(249, 248, 252, 1);
}

.pagination-btn.active {
  background-color: rgba(231, 59, 69, 1);
  color: white;
  border-color: rgba(231, 59, 69, 1);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-goto {
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  line-height: 20px;
  margin-left: 20px;
}

.goto-input {
  width: 50px;
  height: 32px;
  border: 1px solid rgba(216, 216, 216, 1);
  border-radius: 4px;
  padding: 6px;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(237, 239, 244, 1);
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: rgba(231, 59, 69, 1);
  font-weight: 500;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: rgba(102, 102, 102, 1);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: rgba(231, 59, 69, 1);
}

.modal-body {
  padding: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-item.full-width {
  grid-column: span 2;
}

.form-item label {
  font-size: 14px;
  color: rgba(0, 0, 0, 1);
  font-weight: 500;
  line-height: 20px;
}

.form-input {
  height: 32px;
  border: 1px solid rgba(216, 216, 216, 1);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, 1);
  line-height: 20px;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: rgba(231, 59, 69, 1);
}

.form-input:disabled {
  background-color: rgba(249, 248, 252, 1);
  color: rgba(153, 153, 153, 1);
  cursor: not-allowed;
}

.form-textarea {
  min-height: 80px;
  border: 1px solid rgba(216, 216, 216, 1);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, 1);
  line-height: 20px;
  box-sizing: border-box;
  resize: vertical;
}

.form-textarea:focus {
  outline: none;
  border-color: rgba(231, 59, 69, 1);
}

.form-textarea:disabled {
  background-color: rgba(249, 248, 252, 1);
  color: rgba(153, 153, 153, 1);
  cursor: not-allowed;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid rgba(237, 239, 244, 1);
}

.btn-cancel {
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(216, 216, 216, 1);
  border-radius: 4px;
  padding: 8px 20px;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  cursor: pointer;
  line-height: 20px;
}

.btn-save {
  background-color: rgba(231, 59, 69, 1);
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  font-size: 14px;
  color: white;
  cursor: pointer;
  line-height: 20px;
}

.btn-cancel:hover {
  background-color: rgba(249, 248, 252, 1);
}

.btn-save:hover {
  background-color: rgba(207, 53, 63, 1);
}

/* 审核信息样式 */
.audit-info {
  margin-bottom: 20px;
}

.audit-info h4 {
  margin: 0 0 10px 0;
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  font-weight: 500;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
}

.info-label {
  width: 100px;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}

/* 凭证预览样式 */
.voucher-section {
  margin: 20px 0;
}

.voucher-section h4 {
  margin: 0 0 10px 0;
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  font-weight: 500;
}

.voucher-preview {
  text-align: center;
  padding: 10px;
  border: 1px solid rgba(216, 216, 216, 1);
  border-radius: 4px;
}

.preview-image {
  max-width: 100%;
  max-height: 200px;
}

/* 单选按钮组样式 */
.radio-group {
  display: flex;
  gap: 20px;
}

.radio-option {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-option input[type="radio"] {
  margin-right: 8px;
}

.radio-label {
  font-size: 14px;
  color: rgba(0, 0, 0, 1);
}
</style>
